<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Language" content="en" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script type="text/javascript" src="../jquery.ui-1.5.2/jquery-1.2.6.js"></script>
	<script type="text/javascript" src="../jquery.ui-1.5.2/ui/jquery.ui.all.js"></script>

	<script type="text/javascript" src="jquery.imageEditor.js"></script>
	<link rel="stylesheet" href="jquery.imageEditor.css" type="text/css" media="screen" />

<style>
#image-editor{

}

.scroller{
	position: absolute;
	width: 600px;
	height: 500px;
	overflow: auto;
	border: 1px solid red;
}

.testoverlay{
	width: 100px;
	height: 140px;
	background: #000;
	filter:alpha(opacity=60); 
	-moz-opacity: 0.6; 
	opacity: 0.6;

}

.image{
	position: absolute;
	width: 100px;
	height: 140px;
	left: 50%;
	margin-left: -50px;
	top: 50%;
	margin-top: -70px;

}

</style>

</head>
<body>


<script type="text/javascript">



function log(data)
{
	typeof console == 'object' ? console.log(data) : alert(data);
};

$(document).ready(function(){




});



</script>
<input type="button" value="100" onclick="$('.image').css({width:100, height: 140, marginLeft: -50, marginTop: -70})"/>
<input type="button" value="800" onclick="$('.image').css({width:800, height: 1120, marginLeft: -400, marginTop: -560})"/>
<input type="button" value="1200" onclick="$('.image').css('width',1200)"/>



<div id="image-editor">
<div class="scroller">
	<img src="../fotos/IMG_1287.jpg" class="image" />
	<div class="testoverlay image"></div>
	<img src="../fotos/IMG_1287.jpg" class="image" style="clip:rect(0px, 180px, 80px, 0px)"/>

</div>
</div>

</body>
</html>
